<template>
  <div class="container1">
    <div class="gooodsList">
      <div
        class="goodsItem"
        v-for="(item, index) in goodsList"
        :key="item.id"
        :style="
          (index + 1) % 4 === 0 && index !== 0 ? { marginRight: 0 } : null
        "
        @click="clickGood(item)"
      >
        <div class="goodsImg">
          <el-image :src="item.goodsImg" lazy></el-image>
        </div>

        <div class="goodsTitle">
          {{ item.title }}
        </div>

        <div style="display: flex">
          <div class="types" v-for="(type, i) in item.typeList" :key="i">
            <img src="../../static/d05.png" />
            <span>{{ type }}</span>
          </div>
        </div>

        <div class="price">
          <div class="dayPrice">￥{{ item.price }}/天起</div>
          <div class="discountPrice">
            <span>券后￥{{ item.discount }}/天</span>
          </div>
          <div class="firstPrice">
            <span>首月租金{{ item.firstMon }}元</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    goodsList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  methods: {
    clickGood(item) {
      this.$router.push({
        path: "/goodsDetail",
        query: {
          detail: item,
        },
      });
    },
  },
};
</script>

<style scoped>
.container1 {
  margin-top: 0.1rem;
  width: 70%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0.1rem;
  background-color: rgb(244, 244, 244);
}
.gooodsList {
  padding: 1%;
  display: flex;
  flex-wrap: wrap;
}
.goodsItem {
  background-color: #fff;
  margin-right: 1.2%;
  padding: 1.5%;
  width: 21.1%;
  margin-top: 1%;
  cursor: pointer;
}
.goodsTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.goodsImg img {
  width: 100%;
  height: 100%;
  border-radius: 0.15rem;
}
.types {
  display: flex;
  margin: 0.08rem 0;
}
.types img {
  width: 0.1rem;
  height: 0.1rem;
}
.types span {
  font-size: 0.12rem;
  transform: scale(0.8333);
  transform-origin: 0 0;
  white-space: nowrap;
  text-align: left;
  display: block;
}
.price {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.price span {
  display: block;
  font-size: 0.12rem;
  transform: scale(0.8333);
  transform-origin: 0 0;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  transform: translateY(-5%);
}
.dayPrice,
.discountPrice,
.firstPrice {
  height: 0.2rem;
  text-align: center;
  width: 50%;
  line-height: 0.2rem;
}
.dayPrice {
  color: rgb(229, 0, 18);
  width: 48%;
}
.discountPrice {
  background-image: linear-gradient(
    to right,
    rgb(224, 184, 113),
    rgb(241, 217, 175)
  );
  font-weight: 600;
  border-radius: 0.07rem;
  color: #fff;
  width: 48%;
  font-size: 0.13rem;
  transform: scale(0.9333);
  transform-origin: 0 0;
  white-space: nowrap;
  padding: 2%;
}
.firstPrice {
  background-color: rgb(229, 0, 18);
  color: #fff;
  border-radius: 0.07rem;
  width: 50%;
  padding: 2% 2%;
  font-size: 0.12rem;
  transform: scale(0.9333);
  transform-origin: 0 0;
  white-space: nowrap;
}
</style>